<template>
  <div class="tagstatistics-container">
    <main class="main">
      <div class="main-left main-item">
        <Bar></Bar>
        <div class="main-footer"></div>
      </div>
      <div class="main-right main-item">
        <Pie></Pie>
        <div class="main-footer"></div>
      </div>
    </main>
  </div>
</template>

<script>
import Bar from '@/components/Echarts/Bar'
import Pie from '@/components/Echarts/Pie'

export default {
  name: 'TagStatistics',
  components: {
    Bar,
    Pie
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
}
// .main-left {
//   margin-right: 5px;
// }
// .main-right {
//   margin-left: 5px;
// }
.main-item {
  position: relative;
  flex: 1;
  border: 1px solid rgba(25, 186, 139, 0.17);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04) url(../../assets/images/line.png);
}
.main-item::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.main-item::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.main-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.main-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '';
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
}
.main-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
</style>
